<template>
  <div class="dashboard-container">
    <el-row :gutter="20" class="card-container">
      <!-- 用户总数 -->
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" class="stat-card user-card">
          <div class="card-content">
            <div class="card-left">
              <el-icon><user /></el-icon>
            </div>
            <div class="card-right">
              <div class="card-num">{{ animatedUserCount }}</div>
              <div>用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 歌曲总数 -->
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" class="stat-card song-card">
          <div class="card-content">
            <div class="card-left">
              <el-icon><headset /></el-icon>
            </div>
            <div class="card-right">
              <div class="card-num">{{ animatedSongCount }}</div>
              <div>歌曲总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 歌手数量 -->
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" class="stat-card singer-card">
          <div class="card-content">
            <div class="card-left">
              <el-icon><mic /></el-icon>
            </div>
            <div class="card-right">
              <div class="card-num">{{ animatedSingerCount }}</div>
              <div>歌手数量</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 歌单数量 -->
      <el-col :span="6">
        <el-card shadow="hover" :body-style="{ padding: '0px' }" class="stat-card playlist-card">
          <div class="card-content">
            <div class="card-left">
              <el-icon><document /></el-icon>
            </div>
            <div class="card-right">
              <div class="card-num">{{ animatedSongListCount }}</div>
              <div>歌单数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 动态音符图表 -->
    <div class="chart-section">
      <canvas id="noteCanvas" class="note-container"></canvas>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { HttpManager } from "@/api/index";
import { Mic, Document, User, Headset } from "@element-plus/icons-vue";

// 定义统计数据
const userCount = ref(0);
const songCount = ref(0);
const singerCount = ref(0);
const songListCount = ref(0);

// 定义动态递增的数字
const animatedUserCount = ref(0);
const animatedSongCount = ref(0);
const animatedSingerCount = ref(0);
const animatedSongListCount = ref(0);

// 动态递增效果函数
function animateValue(refValue, start, end, duration) {
  let startTime = null;
  const step = (timestamp) => {
    if (!startTime) startTime = timestamp;
    const progress = Math.min((timestamp - startTime) / duration, 1);
    refValue.value = Math.floor(progress * (end - start) + start);
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  };
  requestAnimationFrame(step);
}

// 获取统计数据并启动动态效果
HttpManager.getAllUser().then((res) => {
  userCount.value = (res as ResponseBody).data.length;
  animateValue(animatedUserCount, 0, userCount.value, 1000);
});

HttpManager.getAllSong().then((res) => {
  songCount.value = (res as ResponseBody).data.length;
  animateValue(animatedSongCount, 0, songCount.value, 1000);
});

HttpManager.getAllSinger().then((res) => {
  singerCount.value = (res as ResponseBody).data.length;
  animateValue(animatedSingerCount, 0, singerCount.value, 1000);
});

HttpManager.getSongList().then((res) => {
  songListCount.value = (res as ResponseBody).data.length;
  animateValue(animatedSongListCount, 0, songListCount.value, 1000);
});

// 动态音符图表
onMounted(() => {
  const canvas = document.getElementById("noteCanvas") as HTMLCanvasElement;
  const ctx = canvas.getContext("2d");

  // 设置画布大小
  canvas.width = window.innerWidth * 0.9;
  canvas.height = 300;

  const notes = [];

  // 随机生成音符及其形状
  function createNote() {
    const shapes = ['circle', 'triangle', 'square']; // 可选形状
    const shape = shapes[Math.floor(Math.random() * shapes.length)]; // 随机选择形状
    const note = {
      x: Math.random() * canvas.width,
      y: canvas.height,
      speed: Math.random() * 2 + 1,
      size: Math.random() * 20 + 10,
      color: `hsl(${Math.random() * 360}, 100%, 50%)`, // 随机颜色
      shape: shape // 添加形状属性
    };
    notes.push(note);
  }

  function drawNotes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    notes.forEach((note) => {
      ctx.fillStyle = note.color;

      // 根据形状绘制
      ctx.beginPath();
      if (note.shape === 'circle') {
        ctx.arc(note.x, note.y, note.size / 2, 0, Math.PI * 2); // 圆形
      } else if (note.shape === 'triangle') {
        ctx.moveTo(note.x, note.y);
        ctx.lineTo(note.x - note.size / 2, note.y + note.size);
        ctx.lineTo(note.x + note.size / 2, note.y + note.size); // 三角形
        ctx.closePath();
      } else if (note.shape === 'square') {
        ctx.rect(note.x - note.size / 2, note.y - note.size / 2, note.size, note.size); // 正方形
      }
      ctx.fill();
      note.y -= note.speed; // 向上移动

      // 移除超出画布的音符
      if (note.y < -note.size) {
        notes.splice(notes.indexOf(note), 1);
      }
    });
  }

  function animate() {
    if (Math.random() < 0.1) createNote(); // 随机生成音符
    drawNotes();
    requestAnimationFrame(animate);
  }
  animate();
});
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
}

.card-container {
  margin-top: 10px;
}

.stat-card {
  border-radius: 12px;
  transition: transform 0.3s;
}

.user-card {
  background: linear-gradient(135deg, #ffa726, #fb8c00); /* 用户总数配色 */
  color: white;
}

.song-card {
  background: linear-gradient(135deg, #66bb6a, #43a047); /* 歌曲总数配色 */
  color: white;
}

.singer-card {
  background: linear-gradient(135deg, #29b6f6, #0288d1); /* 歌手数量配色 */
  color: white;
}

.playlist-card {
  background: linear-gradient(135deg, #ab47bc, #8e24aa); /* 歌单数量配色 */
  color: white;
}

.stat-card:hover {
  transform: scale(1.05);
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 120px;
  padding-left: 15%;
  text-align: center;
}

.card-left {
  font-size: 3rem;
}

.card-right {
  flex: 1;
  font-size: 16px;
}

.card-num {
  font-size: 40px;
  font-weight: bold;
  transition: color 0.3s;
}

.stat-card:hover .card-num {
  color: #ffea00;
}

/* 动态音符图表样式 */
.chart-section {
  margin-top: 5px;
  text-align: center;
}

.note-container {
  height: 300px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 12px;
}
</style>

